<template>
  <view class="fanManagement_">
    <!--    <view class="search_wrapper">-->
    <!--      <view class="input_wrapper">-->
    <!--        <image src="/static/images/search.png"></image>-->
    <!--        <u-input v-model="value" :type="type" :border="false" />-->
    <!--      </view>-->
    <!--      <view>搜索</view>-->
    <!--    </view>-->
    <view class="content_wrapper">
      <view
        class="item_wrapper"
        v-for="item in list"
        :key="item"
        @click="listFn(item)"
      >
        <image class="img_1" v-if="item.avatar" :src="item.avatar"></image>
        <image class="img_2" v-if="!item.avatar" src="http://admin.ylnumber.cn/prod-api/file/test/productImage/20230719/1cf200220faf47e18ad41f5c51df8584.png"></image>
        <view class="right_">
          <view class="top_wrapper">
            <text>{{ item.nickName || "" }}</text>
            <view class="item_2">
              <!-- <image src="/static/user/4.png"></image> -->
              <view>
                {{
                  item.roleId === 1
                    ? "联创"
                    : item.roleId === 2
                    ? "合伙人"
                    : item.roleId === 3
                    ? "服务商"
                    : item.roleId === 4
                    ? "店主"
                    : item.roleId === 5
                    ? "普通用户"
                    : ""
                }}
              </view>
            </view>
            <!--            <view class="item_1">-->
            <!--              <view>普通用户</view>-->
            <!--            </view>-->
          </view>
          <view class="footer_wrapper">
            <view>手机号：{{ item.phone || "无" }}</view>
            <view>{{ item.createTime.toLocaleString().replace(/T/g,' ').replace(/Z/g,'') }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore
      :status="status"
      :icon-type="iconType"
      :load-text="loadText"
      @loadmore="loadNextFn"
    />
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getSubordinate } from "@/api/fanManagement";

export default {
  name: "index",
  //上拉
  onReachBottom() {
    this.listPage();
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.showLoading({
      title: "正在刷新...",
    });
    this.params.current = 1;
    this.params.size = 20;
    this.list=[]
    this.listPage();
  },
  onShow() {
    this.openId=uni.getStorageSync("openId") || ""
	this.phone=uni.getStorageSync("phoneNumber") || ""
	console.log(uni.getStorageSync("phoneNumber") || "")
    console.log(this.openId, "openId");
    if (this.openId) {
      this.params.wxOpenid = this.phone;
      this.listPage();
    } else {
      // 弹窗告诉用户去登录
      uni.showModal({
        title: "温馨提示",
        content: "此时此刻需要您登录喔~",
        // showCancel: false,
        confirmText: "去登录",
        cancelText: "再逛会",
        success: (res) => {
          console.log(res, "嘻嘻");
          if (res.confirm) {
            uni.switchTab({
              url: "/pages/user/index",
            });
          }
          if (res.cancel && getCurrentPages().length > 1) {
            uni.navigateBack();
          }
        },
      });
    }
  },
  data() {
    return {
      openId:'',
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      value: "",
      type: "text",
      list: [],
      params: {
        size: 20,
        current: 1,
        wxOpenid: "",
      },
    };
  },
  methods: {
    async listPage() {
      this.status = "loading";
      const res = await getSubordinate(this.params);
      console.log(res, "获取下级粉丝");
      if (res.code === 0) {
        //关闭加载动画
        uni.stopPullDownRefresh();
        uni.hideLoading();
        this.list.push(...res.data.records);
        console.log(this.list, "this.list");

        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.params.size) {
          this.params.current++;
          return;
        }

        if (this.list.length < this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.data.records.length !== 0 &&
          res.data.records.length < this.params.size
        ) {
          this.params.current++;
          return;
        }
      }
    },

    listFn(item) {
      console.log(item, "item");
      uni.navigateTo({
        url: `/pages/subpackage/fanDetails/index?order=${JSON.stringify(item)}`,
      });
    },

    //点击组件触发上拉加载
    loadNextFn() {
      this.listPage();
    },

    //搜索
    searchSubmitValue: function (e) {
      console.log(e.detail.value, "搜索");
      if (this.$util.trim(e.detail.value).length > 0) {
        uni.navigateTo({
          url: "/pages/goods_search/index?searchValue=" + e.detail.value,
        });
      } else {
        return this.$util.Tips({
          title: "请填写要搜索的产品信息",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.fanManagement_ {
  background: #ffffff;
  min-height: 100vh;
  padding-bottom: rpx(16);
  .search_wrapper {
    padding: rpx(6) rpx(12);
    display: flex;
    align-items: center;
    > .input_wrapper {
      width: rpx(309);
      height: rpx(32);
      background: #f5f5f5;
      border-radius: rpx(16);
      padding: rpx(0) rpx(12);
      display: flex;
      align-items: center;
      > image {
        width: rpx(16);
        height: rpx(16);
        vertical-align: middle;
        margin-right: rpx(8);
      }
      u-input {
        flex: 1;
        .input {
          width: 100%;
          padding-right: rpx(16);
        }
      }
    }
    view:last-child {
      font-size: rpx(15);
      font-weight: bold;
      color: #353535;
      margin-left: rpx(12);
    }
  }
  > .content_wrapper {
    padding: rpx(0) rpx(12);
    margin-bottom: rpx(16);
    > .item_wrapper {
      padding: rpx(17) rpx(0) rpx(16);
      display: flex;
      border-bottom: rpx(1) solid #efefef;
      > .img_1 {
        width: rpx(40);
        height: rpx(40);
        vertical-align: middle;
        border-radius: 50%;
        margin-right: rpx(4);
      }
      > .img_2 {
        width: rpx(40);
        height: rpx(40);
        vertical-align: middle;
        border-radius: 50%;
        margin-right: rpx(4);
        border: rpx(1) solid #cccccc;
      }
      > .right_ {
        flex: 1;
        display: flex;
        flex-direction: column;
        > .top_wrapper {
          margin-bottom: rpx(6);
          display: flex;
          > text {
            margin-right: rpx(4);
            font-size: rpx(13);
            font-weight: bold;
            color: #353535;
          }
          > .item_1 {
            background: #f5f5f5;
            border-radius: rpx(9);
            font-size: rpx(11);
            font-weight: 400;
            color: #353535;
            padding: rpx(0) rpx(6);
            display: flex;
            align-items: center;
            justify-content: center;
          }
          > view.item_2 {
            background: #f1dcbb;
            border-radius: rpx(9);
            font-size: rpx(11);
            font-weight: 400;
            color: #353535;
            padding: rpx(0) rpx(6);
            display: flex;
            > image {
              width: rpx(29);
              height: rpx(18);
              vertical-align: middle;
              margin-left: rpx(-6);
            }
            > view {
              display: flex;
              align-items: center;
            }
          }
        }
        > .footer_wrapper {
          display: flex;
          justify-content: space-between;
          font-size: rpx(12);
          font-weight: 400;
          color: #353535;
          view:last-child {
            font-size: rpx(11);
            font-weight: 400;
            color: #b2b2b2;
          }
        }
      }
    }
  }
}
</style>
